<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上元每日出勤打卡click in、out</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   button{
       width: 100px;
       height: 60px;
   }
</style>

      
<body>

    <div id="app">
        <button @click="getData">获取数据</button>
        <button @click="filterData">过滤数据</button>
        <button @click="oneClick">一键打卡</button>
    </div>


 

    <script>

        var app = new Vue({
            el:"#app",
            data:{
                token:"",
                // 返回打卡每天信息的数据
                responseData:[],
                // 过滤后未打卡的天数
                forgetList:[],
                // 填入自己的手机号和密码
                personalInfo:{
                        'username':"18667184527",
                        'passwd':"fly940106"
                    }

            },
            created() {
                //1. 初始化登录获取后端返回的token值存入
           
                    axios.post('https://gate.shangyuanjiaoyu.com/oluc/v1/login/simple', 
                    this.personalInfo).then(function (response) { 
                        // 会出现乱排序的情况token值不对应
                        app.token=response.data.data.token;
                        console.log("获取请求头");
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
            
            },
            methods: {
                // 2.点击按钮获取未打卡的信息存入responseData中
                getData(){
                    //2.1 设置请求头中的token
                    
                   
                        axios.interceptors.request.use(function(config){
                            config.headers.Authorization = app.token;
                            return config;
                        });

                        //2.2 获取个人打卡信息接口数据

                        axios.post('https://gate.shangyuanjiaoyu.com/olprod/v1/personal/class/query',{"classId": "157837234470913"}).then(response=>{
                            // 获取每天打卡的数组数据
                            app.responseData=response.data.data.classCalers;
                            console.log("获取每天打卡的数组数据");
                            console.log(response);
                        })
                },
                filterData(){
                          //2.3 先获取后端当天打卡之前的每天打卡的记录
                    // 进行判断，如果stuSignNum=1已经打卡，未打卡的进行记录    记录中包含
                    let timeStamp = getStamp();
                    console.log(timeStamp);

                        app.responseData.forEach((obj,index)=>{
                            // console.log("-----------"+index);
                            // 先获取时间毫秒进行比较
                            let t = obj.techDate+" "+obj.startTime;
                            let tStamp= (new Date(t)).getTime();
                            // 判断没有打卡的天数
                            if(timeStamp>tStamp&&obj.stuSignNum!==1){
                                app.forgetList.push(obj);
                            }
    
                    })
                    console.log("未打卡的时间calerId");
                    console.log(app.forgetList);
                },

                // 一键打卡
                oneClick(){

                    app.forgetList.forEach((obj,index)=>{

                        axios.interceptors.request.use(function(config){
                            config.headers.Authorization =app.token;
                            return config;
                        });

                        //3.一键打卡
                        axios.post('https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/sign',{"calerId": obj.calerId}).then(response=>{
                        // 获取打卡完成返回的数据
                            console.log(index+"打卡完成返回的数据");
                            console.log(response);
                        })
                    })



                }

            },

        });
        function getStamp(){
             // 获取当天的打卡记录时间
             var d = new Date();
            var day = d.getDate();
            var month = d.getMonth() + 1;
            var year = d.getFullYear();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second =d.getSeconds();
            month=month<10?'0'+month:month;
            day=day<10?'0'+day:day;
            hour=hour<10?'0'+hour:hour;
            minute=minute<10?'0'+minute:minute;
            second=second<10?'0'+second:second;
            let time = year+"-"+month+"-"+day+" "+ hour+":"+minute+":"+second;
            let stamp = (new Date(time)).getTime();
            return stamp;
        }








        


        


            /* 
            登录的接口https://gate.shangyuanjiaoyu.com/oluc/v1/login/simple
            
            打卡接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/sign

            忘记签到的接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/forget/query
            个人信息的接口
            https://gate.shangyuanjiaoyu.com/oluc/v1/user/info/query
            获取个人阶段课程的接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/prod/query

            获取阶段课程每天的情况数据
            {
            "classId": "157837234470913"
            }
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/class/query
            
            */
    </script>





   
</body>

</html>